<template>
  <div>
    <van-search
      v-model="value"
      shape="round"
      placeholder="请输入搜索关键词"
      style="position: sticky; top: 0"
    />

    <div v-for="item in searchData" @click="toxiang(item)">
      <dl style="width: 100%; height: 180px">
        <dt style="float: left; width: 120px">
          <img :src="item.goods_big_logo" alt="" width="120px" height="120px" />
        </dt>
        <dd style="float: left; width: 200px">
          <span>{{ item.goods_name }}</span>
          <p>{{ item.goods_number }}</p>
        </dd>
      </dl>
    </div>

    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell v-for="item in list" :key="item" :title="item" />
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script setup>
import { ref } from "vue";
let searchData = ref([]);
import { searchApi } from "@/api/api";
searchApi().then((res) => {
  console.log("列表数据", res);
  searchData.value = res.data.message.goods;
});

const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);

import { useRouter } from "vue-router";
let router = new useRouter();
const toxiang = (v) => {
  router.push({
    path: "/xiang/" + v.goods_id,
    query: v,
  });
};
</script>

<style lang="scss" scoped></style>
